<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .w{
            width: 1200px;
            margin: 0 auto;
        }
        .fa{
            display: flex;
        }
        .fa-m{
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
            margin-left: 190px;

        }
        .logo{
            display: inline-block;
            content: "";
            width: 275px;
            height: 120px;
            background-image: url("https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/header/sprite.png");
            background-position: center 0;
        }
        .logo:hover{
            background-image: url("https://img1.360buyimg.com/da/jfs/t1/16273/9/11655/153805/5c90a4f3E683206d9/eef283b0ed619fe4.gif?v=0.3331263715180284");
            background-size: contain;
            background-repeat: no-repeat;
        }
        .search{
            display: flex;
            justify-content: space-between;
            width: 480px;
            height: 34px;
            margin-right: 20px;
            border: 2px solid #e2231a;
        }
        .search>input{
            outline: none;
            border: none;
            text-indent: 5px;
            width: calc(480px - 58px);
        }
        .search>span{
            width: 25px;
            height: 25px;
            display: inline-block;
            position: relative;
            top: 5px;
            right: 10px;
        }
        .search>span{
            background-image: url("img/xj2.png");
            background-repeat: no-repeat;
            background-size: 25px 25px;
        }
        .search>span:hover{
            background-image: url("img/xj1.png");
            background-repeat: no-repeat;
            background-size: 25px 25px;
        }
        .search>div{
            width: 58px;
            background-color: red;
            background-image: url("img/search.png");
            background-repeat: no-repeat;
            background-size: 20px 20px;
            background-position: center center;
        }




        .btn button{
            width: 132px;
            height: 36px;
            background-color: white;
            outline: none;
            border: 1px solid #eeeeee;
        }
        .btn button a{
            position: relative;
            top: -6px;
            color: #E1251B;
            font-size: 12px;
            text-decoration: none;
        }
        .btn button span{
            display: inline-block;
            padding: 1px 8px;
            color: white;
            text-align: center;
            border-radius: 10px;
            position: relative;
            top: -10px;
            left: -10px;
            background-color: #E1251B;
        }
        .btn button:hover{
            border: 1px solid #E1251B;
        }

        .list li{
            list-style: none;
            float: left;
            font-size: 12px;
            padding: 5px;
        }
        .list li:nth-of-type(1){
            color: red;
        }
        .list li:hover{
            color: #e1251b;
            cursor: pointer;
        }


        .l2 li{
            padding:0 10px ;
            font-size: 14px;
            position: relative;
            left: -70px;
        }
        .l2 li:hover{
            color: #e1251b;
            cursor: pointer;
        }
        .l2 li:nth-of-type(1){
            color: #e1251b;
            font-weight: bolder;
        }
        .l2 li:nth-of-type(2){
            color: #e1251b;
            font-weight: bolder;
        }


        .r-img{
            width: 190px;
            height: 120px;
            background-image: url("https://img20.360buyimg.com/babel/jfs/t1/113493/31/12355/29708/5f0c023bEba062d8d/74b1048fc890720e.png.webp");
            background-repeat: no-repeat;
            margin-top: -100px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="w fa">
        <div class="logo"></div>

        <div class="fa-m">
            <div class="search">
                <input type="text" placeholder="搜索">
                <span></span>
                <div></div>
            </div>


            <div class="btn">
                <button>
                    <img width="25" src="img/gwc.png">
                    <span>0</span>
                    <a href="#three">我的购物车</a>
                </button>
            </div>

            <div class="list">
                <ul>
                    <li>男士护肤品</li>
                    <li>iPhone</li>
                    <li>教育电视</li>
                    <li>每100-50</li>
                    <li>除草剂</li>
                    <li>京东房产</li>
                    <li>手机</li>
                    <li>补水面膜</li>
                    <li>方便菜</li>
                </ul>
            </div>

            <div class="list l2">
                <ul>
                    <li>秒杀</li>
                    <li>优惠券</li>
                    <li>PLUS会员</li>
                    <li>品牌闪购</li>
                    <li>拍卖</li>
                    <li>京东家电</li>
                    <li>京东超市</li>
                    <li>京东生鲜</li>
                    <li>京东国际</li>
                    <li>京东金融</li>
                </ul>
            </div>

            <div class="r-img">

            </div>
        </div>
    </div>

    <a href="7-20-work-jqr2.html">安卓机器人</a>
</div>
</body>
</html>